{% extends "layout.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
{% endblock %}

{% block content %}
<div class="login-wrapper">
    <div class="login-card">
        <div class="login-header">
            <h2>重置密码</h2>
            <p>请输入您的新密码</p>
        </div>

        <form method="POST" action="{{ url_for('auth.reset_password', token=token) }}" class="login-form">
            <div class="form-group">
                <label for="password">新密码</label>
                <div class="input-with-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    <input type="password" id="password" name="password" placeholder="请输入新密码" required>
                </div>
            </div>

            <div class="form-group">
                <label for="confirm_password">确认密码</label>
                <div class="input-with-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    <input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入密码" required>
                </div>
            </div>

            <button type="submit" class="login-btn">
                <span>重置密码</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                    <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
            </button>

            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <div class="alert-message {% if 'error' in messages[0] %}error{% else %}success{% endif %}">
                        {{ messages[0] }}
                    </div>
                {% endif %}
            {% endwith %}
        </form>
    </div>
</div>
{% endblock %}